<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model双向数据绑定</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    {{message}} <br>
    <!--1. lazy: 修饰符代表当内容确定完成，准备提交（如按下回车键）时再进行同步-->
    <h1>1. v-model:lazy运算符用法<hr></h1>
    <input type="text" v-model.lazy="message"> <br>
    <!--2. number：修饰符将输入的数值类型的字符串主动转换为number数字-->
    <h1>2. v-model:number运算符用法(常用)<hr></h1>
    <input type="text" v-model.number="counter"> <br>
    <h2>counter:{{counter}}-{{typeof counter}}</h2>
    <h1>3. v-model:trim运算符用法<hr></h1>
    <input type="text" v-model.trim="content">
    <h2>content: {{content}}-{{content.length}}</h2>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    // 指定绑定的视图dom
    el: '.d1',
    // 定义模型数据
    data:{
      message: '欢迎学习Vue！',
      counter: 0,
      content:'',
    },
    // 定义普通方法
    methods:{

    },
    // 定义计算属性
    computed:{

    }
  })
</script>
